<template>
  <div class="demo-title">date-picker/demo1</div>
  <div class="demo">
    <div class="sscd-demo-row" @click="date.show()">年月日</div>
    <div class="sscd-demo-row" @click="year_month.show()">年月</div>
    <div class="sscd-demo-row" @click="month_day.show()">月日</div>
    <div class="sscd-demo-row" @click="date_hour.show()">年月日时</div>
    <div class="sscd-demo-row" @click="date_time.show()">年月日时分秒</div>
    <div class="sscd-demo-row" @click="hour_minute.show()">时分</div>
    <div class="sscd-demo-row" @click="time.show()">时分秒</div>
  </div>
  <!-- 年月日 -->
  <DatePicker v-model:visible="date.visible" v-model="date.value" @confirm="date.onConfirm" />
  <!-- 年月 -->
  <DatePicker v-model:visible="year_month.visible" type="year-month" v-model="year_month.value" @confirm="year_month.onConfirm" />
  <!-- 月日 -->
  <DatePicker v-model:visible="month_day.visible" type="month-day" v-model="month_day.value" @confirm="month_day.onConfirm" />
  <!-- 年月日时 -->
  <DatePicker v-model:visible="date_hour.visible" type="date-hour" v-model="date_hour.value" @confirm="date_hour.onConfirm" />
  <!-- 年月日时分秒 -->
  <DatePicker v-model:visible="date_time.visible" type="date-time" v-model="date_time.value" @confirm="date_time.onConfirm" />
  <!-- 时分 -->
  <DatePicker v-model:visible="hour_minute.visible" type="hour-minute" v-model="hour_minute.value" @confirm="hour_minute.onConfirm" />
  <!-- 时分秒 -->
  <DatePicker v-model:visible="time.visible" type="time" v-model="time.value" @confirm="time.onConfirm" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import DatePicker from '@sscd-mobile/date-picker'
  //年月日
  const date = reactive({
    visible: false,
    show: () => date.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-date: ', res, date.value)
  })
  //年月
  const year_month = reactive({
    visible: false,
    show: () => year_month.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-year_month: ', res, year_month.value)
  })
  //月日
  const month_day = reactive({
    visible: false,
    show: () => month_day.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-month_day: ', res, month_day.value)
  })
  //年月日时
  const date_hour = reactive({
    visible: false,
    show: () => date_hour.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-date_hour: ', res, date_hour.value)
  })
  //年月日时分秒
  const date_time = reactive({
    visible: false,
    show: () => date_time.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-date_time: ', res, date_time.value)
  })
  //时分
  const hour_minute = reactive({
    visible: false,
    show: () => hour_minute.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-hour_minute: ', res, hour_minute.value)
  })
  //时分秒
  const time = reactive({
    visible: false,
    show: () => time.visible = true,
    value: new Date(2024, 0, 10, 9, 9),
    onConfirm: (res) => console.log('onConfirm-time: ', res, time.value)
  })
</script>

<style scoped></style>